<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <!-- 创建一个容器 -->
  <div id="demo">
    <!-- 简化的写法 -->
    <button @click="showTal1">点击我查看学校的地址</button>
    <hr>
    <!-- 复杂的写法 -->
    <button v-on:click="showTal">点击我查看学校的名称</button>
  </div>
  <script>
    // 创建vue的实例化对象
    let vm = new Vue({
      el: '#demo',
      data: {
        school: '北京邮电大学',
        address: '北京',
        tel: '10086'
      },
      methods: {
        showTal() {
          alert(this.school);
        },
        showTal1() {
          alert(this.address);
        }
      }
    })
    console.log(vm);
  </script>
</body>

</html>